<template>
	<!-- 容器视图，包含整个页面的内容 -->
	<view class="tswc-container">
		<!-- 背景图片，覆盖整个容器 -->
		<image :src="backgroundImageUrl" class="tswc-beijing"></image>
		<!-- 包含顶部导航和轮播图等内容的容器 -->
		<view class="tswc-logo-container">
			<!-- 顶部导航栏 -->
			<view class="tswc-dingbu">
				<!-- 左侧导航文本 -->
				<view class="tswc-wenzidaohang-left">特色·物产</view>
				<!-- 右侧导航文本，点击触发跳转 -->
				<view class="tswc-wenzidaohang-right" @click="tiaozhuan">查看更多</view>
			</view>
			<!-- 轮播图标题图片 -->
			<image :src="imageUrl + '/tesewuchan/tesewuchanfubiaoti.png'" class="tswc-wenzibiaoti"></image>
			<!-- 轮播图图片容器 -->
			<view class="tswc-wuchanlogo">
				<!-- 轮播图图片，点击触发跳转 -->
				<image ref="wuchanlogo" :src="currentSwiperImage" class="wuchanlogo-image rotate-animation"
					:class="{ 'rotated': isImageRotated }" @click="tiaozhuan2"></image>
			</view>
			<!-- 轮播图下方的文字列表 -->
			<view class="tswc-wenzipailie">
				<!-- 标题文字 -->
				<view class="tswc-biaoti">莓茶</view>
				<!-- 分割线 -->
				<view class="tswc-xiantiao"></view>
				<!-- 宣传文字1 -->
				<view class="tswc-xuanchuan1">土 家 族 秘 传 宝 物</view>
				<!-- 分割线 -->
				<view class="tswc-xiantiao"></view>
				<!-- 宣传文字2 -->
				<view class="tswc-xuanchuan1">让 健 康 与 美 味 同 行</view>
			</view>
		</view>
		<!-- 底部轮播图容器 -->
		<view class="tswc-shiyan1">
			<view class="tswc-containers" >
				<!-- z-swiper 组件，用于实现轮播效果 -->
					<z-swiper v-model="list" ref="zSwiper" :options="options" @slideChange="tswconChange" class="carousel" :circular="true">
					<!-- 轮播图项容器，通过 v-for 循环生成 -->
					<z-swiper-item v-for="(item,index) in list" :key="index">
				<view class="" style="height: 450px;">
						<!-- 轮播图项中的图片，根据 item 动态设置 src -->
						<image class="tswc-swiper-item-image" :src="item" mode="aspectFill"></image>
				</view>
					</z-swiper-item>
				</z-swiper>
				
			</view>
		</view>
		<view class="tswc-dibu2">
			<!-- 导航栏内容 -->
			<view class="tswc-tswc-daohang">
				<!-- 文字导航 -->
				<view class="tswc-wenzi">滑动切换商品</view>
				<!-- 图片导航，点击触发跳转 -->
				<view class="tswc-tupiandaohang">
					<!-- <image :src="imageUrl + '/xiaoniao.png'" class="image-image" @click="fhdl"></image> -->
				</view>
			</view>
			<!-- 箭头图标，用于指示操作方向或提示 -->
			<view class="tswc-jianto">
				<image :src="imageUrl + '/tswc/tswcGroup-788.png'" class="tswc-image-ima" :class="{ 'arrow-fade': true }"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,
				// 触摸开始时的 X 坐标
				touchStartX: 0,
				// 触摸开始时的 Y 坐标
				touchStartY: 0,
				// 滑动开始时的 Y 坐标
				startY: 0,
				// 是否正在触摸的标志
				isTouching: false,
				// 当前轮播图的图片路径
				currentSwiperImage: '',
				// 背景图片的 URL
				backgroundImageUrl: 'https://xnlv.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png',
				// 上一张图片的路径
				previousImage: '',
				// 是否是首次加载的标志
				isFirstLoad: true,
				// 图片是否旋转的标志
				isImageRotated: false,
				// 轮播图的配置选项
				options: {
					loop: true, // 开启循环播放
					slidesPerView: '4', // 每次显示 5 个视图
					effect: 'coverflow', // 轮播效果为 coverflow
					centeredSlides: true, // 使幻灯片居中显示
					coverflowEffect: {
						display: 'flex', // 显示方式为 flex
						justifyContent: 'center', // 水平居中
						rotate: 0, // 旋转角度为 10 度
						stretch: -30, // 拉伸程度为 -40
						depth: 200, // 深度为 180
						modifier: 2, // 修饰符为 2
					},
				},
				// 轮播图的图片列表
				list: [
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupian1.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupian1.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupian1.png',
				],
				// 图片路径与背景图片 URL 的映射
				imageMap: {
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png': 'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswcbeijingtupian2.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupian1.png': 'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswcbeinjing2.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png': 'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswcbeijingtupian2.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupian1.png': 'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswcbeinjing2.png',
					'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswctupianda.png': 'https://xnlv.lizxx.com/image/xnlv/static/tswc/tswcbeijingtupian2.png',
				},
			};
		},
		methods: {
			// 轮播图切换时的回调函数
		  tswconChange(swiper, index) {
		      if (index >= 0 && index < this.list.length) {
		          // 获取新的图片路径
		          const newImage = this.list[index];
		          // 更新当前轮播图图片路径
		          this.currentSwiperImage = newImage;
		          if (!this.isFirstLoad) {
		              // 根据图片路径获取对应的背景图片 URL
		              this.backgroundImageUrl = this.imageMap[this.currentSwiperImage];
		          }
		          // 如果不是首次加载且图片切换了
		          if (!this.isFirstLoad && this.previousImage!== this.currentSwiperImage) {
		              console.log('图片切换了');
		              console.log('isImageRotated before setting:', this.isImageRotated);
		              // 先将图片旋转标志重置为 false
		              this.isImageRotated = false;
		              // 延迟执行图片旋转动画
		              this.startAnimationWithTimeout();
		          } else if (this.isFirstLoad) {
		              // 如果是首次加载，不执行动画相关逻辑
		              this.isImageRotated = false;
		          }
		          // 更新上一张图片路径
		          this.previousImage = this.currentSwiperImage;
		          // 标记不再是首次加载
		          this.isFirstLoad = false;
		      }
		  },
			// 延迟执行图片旋转动画的函数
			startAnimationWithTimeout() {
				const animationTimeout = setTimeout(() => {
					// 设置图片旋转标志为 true，触发动画
					this.isImageRotated = true;
					console.log('isImageRotated after setting:', this.isImageRotated);
					// 清除定时器
					clearTimeout(animationTimeout);
				}, 200);
			},
			// 跳转函数1
			tiaozhuan() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const currentPath = currentPage.route;
				console.log('当前页面路径：', currentPath);
				wx.redirectTo({
					url: `/pagesNew/pages-special-local/pages-special-products/tea-drink?fromPage=${currentPath}`,
				});
			},
			// 跳转函数2
			tiaozhuan2() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const currentPath = currentPage.route;
				console.log('当前页面路径：', currentPath);
				wx.redirectTo(({
					url: `/pagesNew/pages-special-local/pages-special-products/Yongshun-May-tea?fromPage=${currentPath}`,
				}))
			},
			// 跳转函数3
			fhdl() {
				wx.redirectTo({
					url: '/pagesNew/pages-guide/guide',
				})
			}
		},
	};
</script>

<style scoped>
	
	/* .swiper-3d.data-v-2ff4d8de, .swiper-3d.swiper-css-mode .swiper-wrapper.data-v-2ff4d8de {
	    
	    perspective: 1200px;
	} */
	.tswc-shiyan{
		z-index: 2;
		position: relative;
		margin-top: 69vh;
		height: ;
		width: ;
		/* border: 2px solid pink; */
	}
	.tswc-containers {
		/* 容器的样式 */
		position: relative;
		width: 100vw;
		height: 100vh;
		/* display: flex; */
		flex-direction: column;
		/* background-color: #E4EBE9; */
		overflow-y: hidden;
		overflow-x: hidden;
		
	}
	
	.tswc-container {
		/* 容器的样式 */
		position: relative;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #E4EBE9;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	/* 定义旋转动画 */
	@keyframes rotateAnimation {
		0% {
			/* 动画开始时的状态，旋转180度，缩放0.5倍，延迟1秒 */
			transform: rotate(180deg) scale(0.5);
			animation-delay: 1s;
		}

		100% {
			/* 动画结束时的状态，旋转0度，缩放1倍 */
			transform: rotate(0deg) scale(1);
		}
	}

	.rotate-animation.rotated {
		/* 当元素具有 rotated 类时，应用旋转动画，持续时间1.5秒，动画效果为 ease */
		animation: rotateAnimation 1.5s ease;
	}

	.tswc-image-ima {
		/* 图片的样式，宽度和高度为100% */
		width: 100%;
		height: 100%;
	}

	.tswc-beijing {
		/* 背景图片的样式，绝对定位，覆盖整个容器 */
		position: absolute;
		z-index: 1;
		height: 100%;
		width: 100%;
	}

	.tswc-logo-container {
		/* 顶部导航和轮播图容器的样式，绝对定位，高度为80vh，宽度为100%，距顶部92rpx */
		z-index: 2;
		position: absolute;
		height: 80vh;
		width: 100%;
		margin-top: 92rpx;
		display: flex;
		flex-direction: column;
		/* border: 2px solid red; */
	}

	.tswc-dingbu {
		/* 顶部导航栏的样式，宽度为100%，高度为48rpx，布局为 flex */
		width: 100%;
		height: 48rpx;
		display: flex;
		margin-top: 134rpx;
	}

	.tswc-wenzidaohang-left {
		/* 左侧导航文本的样式，距左侧5%，宽度为158rpx，高度为48rpx，字体相关设置 */
		margin-left: 5%;
		width: 158rpx;
		height: 48rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #3F5649;
		line-height: 38rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.tswc-wenzidaohang-right {
		/* 右侧导航文本的样式，距左侧410rpx，宽度为96rpx，高度为36rpx，字体相关设置 */
		margin-left: 410rpx;
		width: 96rpx;
		height: 36rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #77827B;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.tswc-wuchanlogo {
		/* 轮播图图片容器的样式，宽度为62vw，高度为29vh，距顶部100rpx，距左侧20% */
		width: 62vw;
		height: 29vh;
		margin-top: 100rpx;
		margin-left: 20%;
	}

	.wuchanlogo-image {
		/* 轮播图图片的样式，宽度和高度为100%，边框半径为50%，边框为白色，宽度为10px */
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 10px solid white;
	}

	.tswc-wenzipailie {
		/* 轮播图下方文字列表的样式，高度为224rpx，宽度为100%，布局为 flex，距顶部25px，距左侧15px */
		height: 224rpx;
		width: 100%;
		display: flex;
		margin-top: 25px;
		margin-left: 15px;
	}

	.tswc-biaoti {
		/* 标题文字的样式，宽度为32rpx，高度为96rpx，字体相关设置，距左侧38% */
		width: 32rpx;
		height: 96rpx;
		margin-left: 38%;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		font-size: 32rpx;
		color: #3F5649;
		line-height: 38rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.tswc-xiantiao {
		/* 分割线的样式，宽度为0rpx，高度为121rpx，边框半径为0rpx，边框为rgba(63,86,73,0.2)，宽度为2rpx，距左侧16rpx */
		width: 0rpx;
		height: 121rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid rgba(63, 86, 73, 0.2);
		margin-left: 16rpx;
	}

	.tswc-xuanchuan1 {
		/* 宣传文字1的样式 */
		width: 24rpx;
		height: 196rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #3F5649;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 12rpx;
	}
	
	.tswc-shiyan1{
		/* 底部轮播图容器的样式 */
		z-index: 3;
		position: relative;
		margin-top: 1100rpx;
		height: 280px;
		width: 100%;
		/* border: 2px solid pink; */
		transform: rotateY(calc(var(--i) * 45deg)) translateZ(200px);
		/* left: -100rpx; */
	}
	
	.tswc-shiyan2{
		z-index: 3;
		position: relative;
		/* margin-top: 560px; */
		height: 120px;
		width: 100%;
		/* border: 2px solid blue; */
	}

	.tswc-dibu1 {
		/* 底部轮播图容器的样式 */
		z-index: 3;
		position: relative;
		/* margin-top: px;//560 */
		height: 150px;
		width: 100%;
		/* border: 2px solid black; */
	}

	.tswc-swiper {
		/* z-swiper组件的样式 */
		z-index: 4;
		height: 100%;
		width: 100%;
		margin-top: 3vh;
	}

	.tswc-swiper-item-image {
		/* 轮播图项中图片的样式 */
		z-index: 3;
		height: 100px;
		width: 100px;
		border-radius: 50%;
	}

	.tswc-dibu2 {
		/* 底部导航栏容器的样式 */
		position: absolute;
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		margin-top: 83vh;
		margin-left: 3vw;

	}

	.tswc-daohang {
		/* 导航栏内容的样式 */
		display: flex;
		width: 100%;
		height: 160rpx;
	}

	.tswc-wenzi {
		/* 文字导航的样式 */
		position: absolute;
		z-index: 5;
		width: 207rpx;
		height: 80rpx;
		margin-left: 2%;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: #697E71;
		line-height: 33rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-left: 280rpx;
		margin-top: 50rpx;
	}

	.tswc-tupiandaohang {
		/* 图片导航的样式 */
		z-index: 8;
		width: 160.31rpx;
		height: 159.51rpx;
		margin-top: -1.5vh;
		/* border: 2px solid pink;//小圆图 */
		margin-left: 4.5vw;
	}

	.tswc-jianto {
		/* 箭头图标的样式 */
		position: absolute;
		z-index: 6;
		width: 40.01rpx;
		height: 40.01rpx;
		margin-top: 10vh;
		margin-left: 45%;
	}

	@keyframes arrowFade {

		/* 箭头淡入淡出动画的关键帧定义 */
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.tswc-arrow-fade {
		/* 应用箭头淡入淡出动画的样式 */
		animation: arrowFade 1.5s infinite;
	}

	.tswc-image-image {
		/* 图片导航中图片的样式 */
		position: absolute;
		z-index: 8;
		width: 160.31rpx;
		height: 159.51rpx;
		margin-top: 2vh;
		margin-left: 70vw;
	}

	.tswc-wenzibiaoti {
		/* 轮播图标题图片的样式 */
		position: absolute;
		z-index: 3;
		width: 385.52rpx;
		height: 130.16rpx;
		margin-top: 12vh;
		margin-left: 28vw;
	}
</style>
